<template>
  <div class="">
    用户名:
    <!-- 第一步给input设置一个ref属性 -->
    <input ref="inputRef" type="text" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 第二步，使用ref，创建一个模型跟它关联，它的初始值，一般是null
// 关联上了，就是dom节点，关联不上就是它的初始值
const inputRef = ref(null)

// 第三步：在生命周期钩子onMounted，去拿dom节点，调用它focus方法
onMounted(() => {
  console.log(inputRef.value)
  inputRef.value.focus()
})
</script>

<style scoped></style>
